<template>
  <div class="container mobileLogin" style="background:#FFF">
    <div class="title">
      <p>欢迎来到天渡配送</p>
    </div>
    <div class="inputTitle">账号</div>
    <van-field
      input-class="filedInput"
      clearable
      :value="formData.account"
      @change="onUserNameChange"
      placeholder="请输入账号"
      :border="false"
      focus="true"
    />
    <div class="inputTitle">密码</div>
    <van-field
      @change="onPasswordChange"
      :value="formData.password"
      type="password"
      input-class="filedInput"
      clearable
      :border="false"
      placeholder="请输入密码"
    />
    <div class="buttonView">
      <van-button size="large" round custom-class="logingButton" @click="mobileLogin">登录</van-button>
    </div>
    <!-- <div class="tips">浙江聚石阵品牌管理咨询有限公司</div> -->
  </div>
</template>

<script>
import { formatTime } from "@/utils/index";
import card from "@/components/card";
import { login, queryProject } from "@/http";
import store from "@/utils/factory.js";

export default {
  components: {
    card
  },

  data() {
    return {
      logs: [],
      value: "",
      imgUrls: [],
      project: [],
      formData: {
        account: "",
        password: ""
      }
    };
  },
  methods: {
    onUserNameChange(e) {
      this.formData.account = e.mp.detail;
    },
    onPasswordChange(e) {
      this.formData.password = e.mp.detail;
    },
    mobileLogin() {
      login(this.formData).then(res => {
        store.set("loginInfo", { name: this.formData.account });
        store.set("password", this.formData.password);
        store.set("account", this.formData.account);
        mpvue.navigateBack({
          delta: 1
        });
      });
    },
    onShow() {
      let self = this;
      if (store.get("account")) {
        this.formData.account = store.get("account");
        this.formData.password = store.get("password");
      }
    }
  },

  created() {}
};
</script>

<style>
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.inputTitle {
  margin-left: 60rpx;
}

.title {
  font-size: 40rpx;
  color: #222222;
  margin: 60rpx;
  margin-top: 60rpx;
}

.bannerInfo {
  height: 400rpx;
  background: #2c2c2c;
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inputArea {
  margin: 30rpx;
}

.right {
  color: #eb6117;
  font-size: 24px;
}

.filedInput {
  height: 50px !important;
  line-height: 50px !important;
  border-bottom: 1px solid #ebebeb !important;
}

.van-cell {
  margin: 30rpx;
  margin-top: 0;
  padding: 0 15px !important;
  background: #fff !important;
  width: auto !important;
}

.middle {
  margin: 0 10rpx;
}

.log-item {
  margin: 10rpx;
}

.logingButton {
  background: #ffc300 !important;
  color: #222222 !important;
}

.buttonView {
  width: 320px;
  margin: 80rpx auto;
}

.tips {
  position: absolute;
  bottom: 80rpx;
  font-size: 24rpx;
  color: gray;
  width: 100%;
  text-align: center;
}
</style>
